<template>
  <el-card>
    <div class="item f-row ai-c p-1">
      <div class="star">*</div>
      <div class="title">健康科普标题</div>
      <el-input placeholder="请输入资讯标题" v-model="title"></el-input>
    </div>
    <div class="item f-row ai-c p-1">
      <div class="title">关键词</div>
      <el-input placeholder="请输入关键词" v-model="keyword"></el-input>
    </div>
    <div class="item f-row ai-c p-1">
      <div class="star">*</div>
      <div class="title">上传形式</div>
      <el-radio-group v-model="radio">
        <el-radio label="1">图文</el-radio>
        <el-radio label="2">视频</el-radio>
      </el-radio-group>
    </div>
    <div class="item f-row p-1">
      <div class="star">*</div>
      <div class="title">资讯内容</div>
      <WEditor
        :defaultText="defaultText"
        :richText.sync="richText"
        v-if="radio == '1'"
      />
      <el-upload
        v-if="radio == '2'"
        class="upload-demo"
        :before-upload="beforeAvatarUpload"
        :action="action"
        :file-list="fileList"
        :limit="4"
      >
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <div class="f-row ac-i btn">
      <div class="btn-light" @click="goBack">返回</div>
      <div class="btn-deep" @click="save">{{ saveTxt }}</div>
      <div class="btn-deep" @click="submit">{{ subVal }}</div>
    </div>
  </el-card>
</template>
<script>
import {
  encyclopedia_emit,
  encyclopedia_draft,
  upfiles,
  encyclopedia_getFileName,
} from "@/request/api";
import WEditor from "@/components/WEditor/WEditor.vue";
export default {
  components: {
    WEditor,
  },
  data() {
    return {
      saveTxt: "保存",
      subVal: "提交",
      title: "",
      keyword: "",
      radio: "1",
      // 默认值
      defaultText: "",
      // 富文本更新的值
      richText: "",
      action: "#",
      fileList: [],
      id:null
    };
  },
  created() {
    if (JSON.stringify(this.$route.params) !== "{}") {
   
      let params = this.$route.params;
      this.keyword = params.keyword;
      this.title = params.title;
           this.id=params.id
      this.radio = params.resourceType == 1 ? "1" : "2";
      if (params.resourceType == 1) {
        this.$nextTick(() => {
          this.defaultText = params.details;
        });
      } else {
        encyclopedia_getFileName(params.details).then((res) => {
          this.fileList = res.result.map((i) => {
            return {
              name: i.fileName,
              url: i.url,
            };
          });
          // console.log(res, 199);
        });
      }
    }
    // 等待组件加载完毕赋值
    /*  this.$nextTick(() => {
      this.defaultText = `<p style="text-align: center; "><img src="https://tr-mba.oss-cn-beijing.aliyuncs.com/picture/202010/20_222430_8011.png" width="30%" style="text-align: center; max-width: 100%;"></p>`;
    }); */
  },
  watch: {},
  methods: {
    submit() {
      if (this.subVal != "提交") {
        return;
      }
      this.subVal = "提交中~";
let urlApi=this.id?encyclopedia_emit:encyclopedia_draft
      urlApi({
        title: this.title,
        keyword: this.keyword,
        resourceType: this.radio == "1" ? 1 : 2,
        details:
          this.radio == "1"
            ? this.richText
            : this.fileList.map((i) => i.url).toString(),
        type: 1003004,
        createByType: 1004001,
        sourceType: 2,
         id:this.id?this.id:null
      })
        .then((res) => {
          this.subVal = "提交";
          if (res.code == 200) {
            this.$message({
              message: "提交成功！",
              type: "success",
            });
            this.goBack();
          } else {
            this.$message.error("提交失败，请重试！");
          }
        })
        .catch((err) => {
          console.log(err, "提交健康科普失败");
        });
    },
    save() {
      if (this.saveTxt != "保存") {
        return;
      }

      this.saveTxt = "保存中~";
let urlApi=this.id?encyclopedia_emit:encyclopedia_draft
      urlApi({
        title: this.title,
        keyword: this.keyword,
        resourceType: this.radio == "1" ? 1 : 2,
        details:
          this.radio == "1"
            ? this.richText
            : this.fileList.map((i) => i.url).toString(),
        type: 1003004,
        createByType: 1004001,
        sourceType: 2,
         id:this.id?this.id:null
      })
        .then((res) => {
          this.saveTxt = "保存";
          if (res.code == 200) {
            this.$message({
              message: "保存成功！",
              type: "success",
            });
            this.goBack();
          } else {
            this.$message.error("保存失败，请重试！");
          }
        })
        .catch((err) => {
          console.log(err, "保存健康科普失败");
        });
    },

    //返回
    goBack() {
      this.$router.go(-1);
    },

    beforeAvatarUpload(file) {
      if (this.saveTxt != "保存") {
        return;
      }

      if (file.type != "video/mp4") {
        this.$message.error("只能上传MP4格式！");
        return;
      }
      this.saveTxt = "视频上传中~";
      upfiles(file).then((res) => {
        this.saveTxt = "保存";
        if (res.code == 200) {
          this.$message({
            message: "上传成功！",
            type: "success",
          });
          this.fileList.push({
            name: file.name,
            url: res.result,
          });
        } else {
          this.$message.error("上传失败");
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .el-icon-plus {
  width: 6.25rem;
  height: 6.25rem;
  background: #00a0ff;
  line-height: 6.25rem;
  text-align: center;
  color: #fff;
  border-radius: 0.3125rem;
}
.btn {
  padding-left: 6.25rem;
  margin-top: 1.875rem;
}
.el-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.el-input {
  width: 61.0625rem;
  margin: 0 0.375rem 0 0;
}
.item {
  color: #333333;
  font-size: 0.875rem;
  position: relative;
  display: grid;
  grid-template-columns: 10rem 1fr;
}
.star {
  position: absolute;
  left: 0;
  top: --0.3125rem;
  color: var(--darkColor);
}
.title {
  margin-right: 0.375rem;
  font-size: 0.875rem;
  color: #333333;
}
</style>